import React, { Component } from "react"
import { connect } from 'react-redux'
import { Form, Switch, Input, Button, message } from 'antd'
import constant from 'containers/finance-setting/loan-setting/constant'
import { messages } from "share/common";
import Priority from "components/template/priority";
import companyAccountSettingService from "../company-account-setting.service";

@connect(mapStateToProps)
@Form.create()
class AliRule extends Component {

  state = {
    saveLoading: false,
    priority: null
  };

  componentWillMount() {
    const { record } = this.props.params;
    const { user } = this.props;
    this.setState({
      priority: record.hasOwnProperty('alipayAccountId') ? {
        levelOrgName: record.companyName,
        levelOrgId: record.companyId
      } : {
        levelOrgName: user.companyName,
        levelOrgId: user.companyId
      }
    })
  }

  handlePriority = value => {
    this.setState({ priority: value });
    value.levelOrgName && this.props.form.setFieldsValue({
      ownerName: value.levelOrgName
    })
  };

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, value) => {
      if (!err) {
        const { close } = this.props, { priority } = this.state;
        const { record } = this.props.params;
        if (!priority) {
          message.error(messages('finance-4.key353')/*请分配权限*/);
          return -1;
        }
        value.companyId = priority.levelOrgId;
        value.companyName = priority.levelOrgName;
        value.accountName = messages('finance-4.key347')/*企业支付宝账户*/;
        this.setState({ saveLoading: true });
        companyAccountSettingService.saveAliBank(Object.assign(record, value)).then(() => {
          this.setState({ saveLoading: false }, () => {
            message.success(messages('common.operate.success')/*操作成功*/);
            close(true);
          });
        }).catch(e => {
          this.setState({ saveLoading: false });
          message.error(e.response.data.message);
        })
      }
    })
  };

  render () {
    const { getFieldDecorator } = this.props.form;
    const { formItemLayout } = constant;
    const { saveLoading, priority } = this.state;
    const { close, user } = this.props, { record } = this.props.params;
    return (
      <div>
        <Form className={'new-form'}>
          <Form.Item
            label={messages('common.column.status')/*状态*/}
            {...formItemLayout}
          >
            {getFieldDecorator("enabled", {
              rules: [{ required: true, message: messages('common.please.input')/*请输入*/ }],
              valuePropName: "checked",
              initialValue: record.hasOwnProperty('alipayAccountId') ? record.enabled : true
            })(
              <Switch>{messages('finance-4.key344')/*启用temp*/}</Switch>
            )}
          </Form.Item>
          <Priority
            top={'COMPANY'}
            onChange={this.handlePriority}
            disabled={record.hasOwnProperty('alipayAccountId')}
            defaultValue={priority}
            formItemLayout={formItemLayout}
            single={false}
          />
          <Form.Item
            label={messages('finance-4.key347')/*企业支付宝账户*/}
            {...formItemLayout}
          >
            {getFieldDecorator("accountNumber", {
              rules: [{
                required: true,
                message: messages('common.please.input')/*请输入*/
              }, {
                pattern: /^[0-9A-Za-z_@.\-]{0,50}$/,
                message: messages('finance-4.key354')/*只能输入字母 数字 _ @ . -*/
              }],
              initialValue: record.accountNumber
            })(
              <Input placeholder={messages('finance-4.key70')/*请输入*/}/>
            )}
          </Form.Item>
          <Form.Item
            label={messages('finance-4.key355')/*开户公司名称*/}
            {...formItemLayout}
          >
            {getFieldDecorator("ownerName", {
              rules: [{
                required: true,
                message: messages('common.please.input')/*请输入*/
              }],
              initialValue: record.ownerName || user.companyName
            })(
              <Input placeholder={messages('finance-4.key70')/*请输入temp2*/}/>
            )}
          </Form.Item>
          <Form.Item
            label={messages('finance-4.key356')/*支付宝账户UID*/}
            {...formItemLayout}
          >
            {getFieldDecorator("accountUid", {
              initialValue: record.accountUid
            })(
              <Input placeholder={messages('finance-4.key70')/*请输入temp2*/} disabled/>
            )}
          </Form.Item>
          <Form.Item
            label={messages('finance-4.key63')/*备注temp*/}
            {...formItemLayout}
          >
            {getFieldDecorator("remark", {
              initialValue: record.remark
            })(
              <Input placeholder={messages('finance-4.key70')/*请输入temp2*/}/>
            )}
          </Form.Item>
          <div className='footer-operate'>
            <Button type='primary' onClick={this.handleSave} loading={saveLoading}>{messages('common.ok')/*确定*/}</Button>
            <Button onClick={() => close()}>{messages('common.cancel')/*取消*/}</Button>
          </div>
        </Form>
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    user: state.login.user
  }
}

export default AliRule
